<template>
    <div id="cryptos">
        <div class="pledgeLoanOrder">
            <assets-head :title="$t('质押借币订单')" :backFunc="() => $router.push('/cryptos/pledgeLoan')"></assets-head>
            <template v-if="noticeList.length">
                <div class="h-100 flex items-center justify-between pl-32 pr-28 mb-40"
                    style="color:#F5C425;background:#56481B;" v-for="(item, index) in noticeList" :key="index"
                    @click="toOrderDetail(item)">
                    <div class="flex font-28">
                        <img src="@/assets/image/waring.png" alt="" class="w-36 h-36" />
                        <span class="ml-22">{{ $t('有笔订单质押率高于60%有平仓风险') }}</span>
                    </div>
                    <img src="@/assets/image/warningTo.png" alt="" class="w-32 h-32" />
                </div>
            </template>
            <div class="content px-32">
                <van-list v-model:loading="loading" :loading-text="$t('加载中...')" :finished="finished"
                    :finished-text="orderList.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">
                    <div class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30" v-for="(item, index) in orderList"
                        :key="index" @click="toOrderDetail(item.id)">
                        <div class="flex justify-between border-b-color h-101 box-border text items-center mb-30">
                            <div class="textColor"><span class="skyColor mr-10">{{ fixStr(item.orderType) }}</span>{{
                                item.loanAmount }}&nbsp;USD
                            </div>
                            <div
                                :class="{ 'redColor': item.state == 3, 'red': item.state == 4, 'text-grey': item.state == 2, 'skyColor': item.state == 1 }">
                                {{ fixStatus(item.state) }}</div>
                        </div>
                        <div class="flex">
                            <div class="mr-100">
                                <div class="text-grey">{{ $t('贷款币种') }}</div>
                                <div class="textColor mt-20">{{ item.loanCurrency.toUpperCase() }}</div>
                            </div>
                            <div class="mr-100">
                                <div class="text-grey">{{ $t('质押率') }}</div>
                                <div class="textColor mt-20">
                                    {{ item.pledgeRate !== '' ? (item.pledgeRate * 10000 / 100).toFixed(2) : '--' }}%</div>
                            </div>
                            <div>
                                <div class="text-grey">{{ $t('总负债') }}</div>
                                <div class="textColor mt-20">{{ item.debtAmount }}&nbsp;{{ item.loanCurrency.toUpperCase()
                                }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!orderList.length && !loading">
                        <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                        <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { orderList } from "@/service/pledgeLoan.js";
import { List } from 'vant'
export default {
    props: {

    },
    components: {
        assetsHead,
        [List.name]: List,
    },
    data() {
        return {
            page: 1,
            orderList: [],
            noticeList: [],
            loading: false,
            finished: false,
        }
    },

    methods: {
        onLoad() {
            this.getOrderList()
        },
        toOrderDetail(id) {
            this.$router.push({ path: '/cryptos/pledgeLoanOrderDetail', query: { id } })
        },
        fixStr(orderType) {
            let str = ''
            if (orderType == 1) {
                str = this.$t('借款')
            } else if (orderType == 2) {
                str = this.$t('新增质押')
            } else if (orderType == 3) {
                str = this.$t('续借')
            } else if (orderType == 4) {
                str = this.$t('还款')
            } else if (orderType == 5) {
                str = this.$t('强平结清')
            }
            return str;
        },
        fixStatus(state) {
            let string = ''
            if (state == 1) {
                string = this.$t('计息中')
            } else if (state == 2) {
                string = this.$t('已结清')
            } else if (state == 3) {
                string = this.$t('强平结清')
            } else if (state == 4) {
                string = this.$t('已逾期')
            }
            return string
        },
        getOrderList() {
            orderList({
                page_no: this.page
            }).then(res => {
                this.orderList = [...this.orderList, ...res.data.list]
                // console.log(logs)
                this.loading = false
                if (res.data.list.length < 10) {
                    this.finished = true
                } else {
                    this.page++
                }
                this.noticeList = res.data.noticeList
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
    .pledgeLoanOrder {
        width: 100%;
        box-sizing: border-box;
    }

    .skyColor {
        color: #13D3EB;
    }

    .redColor {
        color: $red;
    }

    .red {
        color: #FF0000;
    }
}
</style>